<!--
 * @Description:网元报表
 * @Author: 0001100986/LiuShuai
 * @Date: 2021-06-10 14:10:38
 * @LastEditTime: 2021-10-18 08:36:33
 * @LastEditors: 0001100986/LiuShuai
-->
<template>
  <div class="page-content">
    <table-bar :showTop="false" :columns="columns" @changeColumn="changeColumn">
      <div slot="top">
        <el-form :model="filterSearch" label-width="80px">
          <el-row :gutter="20">
            <el-col :xs="24" :sm="12" :lg="6">
              <!-- 租户名称 -->
              <el-form-item label="租户名称">
                <!-- 请输入租户名称 -->
                <el-input v-model.trim="filterSearch.dgName" placeholder="请输入租户名称"></el-input>
              </el-form-item>
            </el-col>
            <el-row :xs="24" :sm="12" :lg="6" style="float: right; margin-right: 10px;">
              <!-- 搜索 重置-->
              <el-button type="primary" @click="search">搜索</el-button>
              <el-button @click="reset">重置</el-button>
            </el-row>
          </el-row>
        </el-form>
      </div>
    </table-bar>
    <tao-table :data="dataList" :page="page" @changePage="changePage" :showPage="true" ref="table">
      <!-- 网元名称 -->
      <el-table-column
        label="网元名称"
        align="center"
        v-if="columns[0].show"
        min-width="200"
        show-overflow-tooltip
        fixed
        prop="ne.userlabel"
      />
      <!-- CPU -->
      <el-table-column label="CPU利用率" width="270" align="center" v-if="columns[1].show">
        <template slot-scope="scope">
          <p v-html="filtersCTR('CPU', scope.row)" class="sum"></p>
        </template>
      </el-table-column>
      <!-- 内存 -->
      <el-table-column label="内存占用率" width="270" align="center" v-if="columns[2].show">
        <template slot-scope="scope">
          <p v-html="filtersCTR('RAM', scope.row)" class="sum"></p>
        </template>
      </el-table-column>
      <!-- 温度 -->
      <el-table-column label="温度" width="270" align="center" v-if="columns[3].show">
        <template slot-scope="scope">
          <p v-html="filtersCTR('TEMP', scope.row)" class="sum"></p>
        </template>
      </el-table-column>
      <!-- 状态 -->
      <el-table-column label="状态" align="center" width="100" v-if="columns[4].show">
        <template slot-scope="scope">
          <div v-show="scope.row.ne.managementState === 'ONLINE'">
            <span v-if="scope.row.ne.connectionState === 'CONNECTED'">
              <i class="i-success"></i>
              链接
            </span>
            <span v-if="scope.row.ne.connectionState === 'DISCONNECTED'">
              <i class="i-error"></i>
              断链
            </span>
          </div>
          <span v-show="scope.row.ne.connectionState === 'UNKNOWN'">
            <i class="i-warning"></i>
            未知
          </span>
        </template>
      </el-table-column>
      <!-- 租户名称 -->
      <el-table-column
        label="租户名称"
        align="center"
        min-width="200"
        show-overflow-tooltip
        v-if="columns[5].show"
        prop="ne.extAttrs.dgName"
      />
      <!-- IP地址 -->
      <el-table-column
        label="IP地址"
        align="center"
        min-width="200"
        show-overflow-tooltip
        v-if="columns[6].show"
        prop="ne.ipAddress"
      />
    </tao-table>
  </div>
</template>

<script>
export default {
  data () {
    return {
      dataList: [],
      filterSearch: {
        dgName: null
      },
      page: {
        page: 1,
        pageSize: 15,
        total: 0
      },
      columns: [
        { name: '网元名称', show: true },
        { name: 'CPU占用率', show: true },
        { name: '内存占用率', show: true },
        { name: '温度', show: true },
        { name: '状态', show: true },
        { name: '租户名称', show: true },
        { name: 'IP地址', show: true },
      ]
    };
  },
  mounted () {
    let _this = this;
    _this.$nextTick(() => {
      _this.refresh();
    });
  },
  methods: {
    // 过滤CPU、内存、温度
    // eslint-disable-next-line complexity
    filtersCTR (type, val) {
      let arry = [];
      // 判断类型
      if (type === 'CPU') {
        arry = [val['002_001_min'] === 0 ? val['002_001_current'] : val['002_001_min'], val['002_001_current'], val['002_001_max']];
      }
      if (type === 'RAM') {
        arry = [val['002_002_min'] === 0 ? val['002_002_current'] : val['002_002_min'], val['002_002_current'], val['002_002_max']];
      }
      if (type === 'TEMP') {
        arry = [val['002_003_min'] === 0 ? val['002_003_current'] : val['002_003_min'], val['002_003_current'], val['002_003_max']];
      }
      // 判断网元状态
      if (val.ne.managementState === 'ONLINE' && val.ne.connectionState === 'CONNECTED') {
        // 计算max、min
        let res = [Math.min.apply(Math, arry), arry[1], Math.max.apply(Math, arry)];
        if (arry[1] === 0) {
          val = '-';
        } else {
          let html = [];
          html.push('<span style="font-size: 14px; line-height: 24px;">');
          // 循环写入样式
          for (let i = 0; i < res.length; i++) {
            let size = res[i];
            // 单位
            if (type !== 'TEMP') {
              if (i === 0) {
                res[i] = 'Min：' + res[i] + '%';
              }
              if (i === 1) {
                res[i] = 'Avg：' + res[i] + '%';
              }
              if (i === 2) {
                res[i] = 'Max：' + res[i] + '%';
              }
            } else {
              if (i === 0) {
                res[i] = 'Min：' + (res[i] - 15) + '℃';
              }
              if (i === 1) {
                res[i] = 'Avg：' + (res[i] - 15) + '℃';
              }
              if (i === 2) {
                res[i] = 'Max：' + (res[i] - 15) + '℃';
              }
            }
            // 判断范围区间
            if (size) {
              if (size >= 90) {
                html.push(`<label style="display: inline-block;  width: 80px; color: #ed4014;">${res[i]}</label>`);
              }
              if (size < 90 && size >= 75) {
                html.push(`<label style="display: inline-block; width: 80px; color: #e9b424;">${res[i]}</label>`);
              }
              if (size < 75) {
                html.push(`<label style="display: inline-block;  width: 80px; color: #19be6b;">${res[i]}</label>`);
              }
            }
            // 分隔符
            if (i !== 2) {
              html.push('<i">/</i>');
            }
          }
          if (html.length === 5) {
            html.splice(1, 0, `<label style="display: inline-block;  width: 80px;">Min：-</label>`);
          }
          html.push('</span>');
          // 拼接HTML
          val = html.join('');
        }
      } else {
        val = '-';
      }
      return val;
    },
    // 网元ID
    neInfo (id) {
      localStorage.setItem('monitor', id);
      // 根据ID查询网元相关信息
      this.$router.push({
        path: `/monitor/device-info`,
        query: {
          id: id
        }
      });
    },
    // 搜索
    search () {
      let _this = this;
      _this.page.page = 1;
      _this.refresh();
    },
    // 重置
    reset () {
      let _this = this;
      _this.page.page = 1;
      _this.filterSearch = {
        dgName: null
      };
      _this.refresh();
    },
    // 刷新
    refresh () {
      let _this = this;
      let params = {
        paras: {
          poId: '002'
        },
        dgName: _this.filterSearch.dgName,
        limit: _this.page.pageSize,
        offset: (_this.page.page - 1) * _this.page.pageSize
      };
      _this.$http.post({
        url: '/api/sdwan/ne/allInfos',
        data: params
      }).then(res => {
        let { status, resultBody } = res;
        if (status === '0') {
          _this.page.total = resultBody.count;
          _this.dataList = resultBody.objects;
        }
      });
    },
    // 过滤显示字段
    changeColumn (columns) {
      this.columns = columns;
      this.$refs.table.doLayout();
    },
    // 切换页码 & 显示条数
    changePage (page) {
      if (page.page) {
        this.page.page = page.page;
      } else {
        this.page.page = 1;
        this.page.pageSize = page.limit;
      }
      this.refresh();
    },
  }
};
</script>

<style lang='scss' scoped>
.page-content {
  width: 100%;
  height: 100%;

  .avatar {
    width: 50px;
    height: 50px;
    border-radius: 50%;
  }
}
.i-dot {
  display: inline-block;
  width: 12px;
  height: 12px;
  margin-right: 8px;
  border-radius: 50%;
  background: #e8eaec;
  position: relative;
  top: 1px;
}
.i-success {
  display: inline-block;
  width: 12px;
  height: 12px;
  margin-right: 8px;
  border-radius: 50%;
  background: #19be6b;
  position: relative;
  top: 1px;
}
.i-error {
  display: inline-block;
  width: 12px;
  height: 12px;
  margin-right: 8px;
  border-radius: 50%;
  background: #ed4014;
  position: relative;
  top: 1px;
}
.i-warning {
  display: inline-block;
  width: 12px;
  height: 12px;
  margin-right: 8px;
  border-radius: 50%;
  background: #f90;
  position: relative;
  top: 1px;
}
.ne-title {
  cursor: pointer;
  color: #3296fa !important;
  &:hover {
    text-decoration: underline;
  }
}
</style>